<template>
	<van-cell-group>
		<!--
      要求的数组项
        item: {
          id,
          name, // 歌曲名
          maxBr, // 最大音质
          alias, // 别名
          artists, // 歌手数组
          albumName, // 专辑名
        }
     -->
		<div class="ranking" v-for="(item,idx) in list" :key="idx">
			<slot :idx="idx"></slot>
            <template>
                <div v-if="mode === 'rank'" :class="{ icon: true, top: idx < 3 }">
                    {{ 9 > idx ? ('0' + (idx + 1)) : (idx + 1) }}
                </div>
                <div v-else-if="mode === 'normal'" class="song-title">{{ idx + 1 }}</div>
            </template>
			<van-cell center>
				<template #label>
					<span class="sq" v-if="item.maxBr > 320000" />
					{{ getLabel(item) }}
				</template>
				<template #title>
					<div class="song-info">
						<span>{{ item.name }}</span>
						<span v-if="item.alias" class="song-title">
							({{ item.alias }})
						</span>
					</div>
				</template>
				<template #right-icon>
					<van-icon size="20" name="play-circle-o" />
				</template>
			</van-cell>
		</div>
	</van-cell-group>
</template>

<script>
export default {
	props: {
        mode: {
            type: String,
            default: 'default',
        },
		list: {
			type: Array,
			default: () => [],
		},
	},
	methods: {
        abc (idx) {
            if (idx < 3) {
                color = "#fff"
                { idx + 1 > 9 ? idx + 1 : `0${idx + 1}` }
            }
        },
		getLabel(item) {
			return `${item.artists.map((item) => item.name).join(' / ')} - ${
				item.albumName
			}`
		},
		getTitle(item) {
			if (item.alias) {
				return `${item.name} (${item.alias})`
			} else {
				return item.name
			}
		},
	},
}
</script>

<style scoped>
.ranking {
    display: flex;
    align-items: center;
    margin-left: 8px;
}
.song-title {
	color: #ccc;
}
.song-info {
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}
.sq {
	background-image: url('https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=');
	background-size: 166px 97px;
	display: inline-block;
	width: 12px;
	height: 8px;
}
</style>